<template>
    <div :class="['table-list-container', { 'close-width': isClosedRef }]">
        <!-- <BaseLoading v-if="isLoadingRef" /> -->
        <a-table
            bordered
            :data-source="props.levelList"
            :columns="columns(userInfo?.identity)"
            :pagination="false"
            :scroll="{ x: true }"
            :loading="isLoadingRef"
            :rowKey="(record) => record?.levelId"
            :row-selection="{ selectedRowKeys: idsRef, onChange: onSelectChange }"
        >
        </a-table>
    </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onBeforeMount, Ref, toRefs, UnwrapRef } from "vue";
import { computed, defineComponent, reactive, ref } from "vue";
import { cloneDeep } from "lodash-es";
import { storeToRefs } from "pinia";
import appStore from "@/store";
import columns from "../colums";

interface DataItem {
    levelName: string;
    levelDescription: string;
    assessmentRequire: string;
    interviewRequire: string;
    baseNumber: string;
    levelScore: string;
}
interface PropTypes {
    levelList: DataItem[];
}
const props = defineProps<PropTypes>();
const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "");
const { isClosedRef, isLoadingRef } = storeToRefs(appStore.useLevelStore);


// 选择删除
const { idsRef } = storeToRefs(appStore.useCommonStore);
const onSelectChange = (keys) => {
    const arr:any =[
        ...idsRef.value,
        ...keys,
    ];
    idsRef.value = arr;
};




</script>

<style lang="less">
.table-list-container {
    width: calc(100% - 260px);
    margin-top: 1px;
    margin-left: 1px;

    &.close-width {
        width: 100%;
    }
}

.ant-table-row {
    height: 60px;
    box-sizing: border-box;
    // background-color: #108ee9;
}

.ant-table-cell {
    height: 60px;
    box-sizing: border-box;
}

.editable-cell {
    position: relative;

    .editable-cell-input-wrapper,
    .editable-cell-text-wrapper {
        padding-right: 24px;
    }

    .editable-cell-text-wrapper {
        padding: 5px 24px 10px 14px;
        // background-color: #f40;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .editable-cell-icon-edit,
    .editable-cell-icon-save {
        position: absolute;
        right: 0;
        width: 30px;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        margin-right: 2px;

        span {
            width: 40px;
            height: 30px;
        }
    }

    .editable-cell-icon-edit {
        margin-top: 4px;
        // display: none;
    }

    .editable-cell-icon-save {
        line-height: 30px;
    }

    .editable-cell-icon-edit:hover,
    .editable-cell-icon-save:hover {
        color: #108ee9;
    }

    span.anticon {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.ant-input {
    width: 130px;
}
</style>
